<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <meta name="description" content="Sign in">
    <meta name="author" content="YIg">

    <title>Sign in now!</title>

    <!-- Bootstrap CSS-->
    <link rel="stylesheet" th:href="@{../static/css/login/bootstrap.min.css}">

    <!-- font-awesome 图标库-->
    <link th:href="@{../static/css/login/font-awesome.min.css}" rel="stylesheet">

    <!-- animate css 动画 -->
    <link rel="stylesheet" th:href="@{../static/css/login/animate.css}">

    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，必须放在script前边)-->
    <script th:src="@{../static/js/jquery.min.js}"></script>

    <!-- 加载 Bootstrap 的所有 JavaScript 插件。-->
    <script th:src="@{../static/js/bootstrap.min.js}"></script>

    <!-- Custom styles for this template -->
    <link rel="StyleSheet" th:href="@{../static/css/login/verification.css}" type="text/css"
          media="screen"/>
    <link rel="stylesheet" th:href="@{../static/css/login/signin.css}" type="text/css"
          media="screen"/>

</head>

<body>

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-7">
            <a th:href="@{/catalog/view}">
                <img class="img-responsive center-block" th:src="@{../static/images/login/phonecat2.gif}" alt="">
            </a>
        </div>
        <div class="col-sm-5" id="form_div">
            <form class="form-signin" th:action="@{/account/login}" method="post">
                <h2 class="form-signin-heading">Please sign in</h2>
                <input  type="text" id="username" name="username"  class="form-control" th:placeholder="username" autocomplete="off" required autofocus>
                <input  type="password" id="password"  name="password" class="form-control" th:placeholder="password" required>
                <div class="register-text">Not a member? <a th:href="@{#}" id="register-a" data-toggle="modal" data-target="#registerModal">Register</a>
                </div>

                <button id="goLogin" class="btn btn-lg btn-warning btn-block" type="submit">Sign in</button>

                <button style="display: none;" id="login-submit" class="btn btn-lg btn-warning btn-block" type="button" data-toggle="modal" data-target="#myVerificationModal">Sign in</button>

            </form>
        </div>
    </div>

</div>

<!-- Register Modal -->
<div class="modal fade" id="registerModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" style="/*z-index: 100;*/">
    <div class="modal-dialog" role="document">
        <div class="modal-content register-content">
            <form id="register-form" th:action="@{/account/register}" method="post" class="form-horizontal" th:object="${account}">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">Lovely Pets At Pet Store!</h4>
                </div>
                <div class="modal-body">
                    

<h3 id="userInfo" data-toggle="tooltip" data-placement="bottom" title="REQUIRED" style="color: #d9534f;">User Information</h3>

<div id="basic-table" class="bs-callout bs-callout-danger">
    <div id="user-name-div" class="form-group has-feedback">
        <label for="username-reg" class="col-sm-4 control-label">User ID:</label>
        <div class="col-sm-8 padding-reg">
            <input type="text" class="form-control" name="username" th:field="*{username}" id="username-reg" th:placeholder="Username" autocomplete="off" required>
            <span id="usr-true" class="glyphicon glyphicon-ok form-control-feedback padding-ico"></span>
            <span id="usr-false" class="glyphicon glyphicon-remove form-control-feedback padding-ico"></span>
            <span id="usr-empty" class="glyphicon glyphicon-warning-sign form-control-feedback padding-ico"></span>
        </div>
    </div>

    <div id="pwd-reg-div" class="form-group has-feedback">
        <label for="password-reg" class="col-sm-4 control-label">Password:</label>
        <div class="col-sm-8 padding-reg">
            <input type="password" class="form-control" name="password" id="password-reg" th:field="*{password}" th:placeholder="Password" required>
            <span id="pwd-true" class="glyphicon glyphicon-ok form-control-feedback padding-ico"></span>
            <span id="pwd-empty" class="glyphicon glyphicon-warning-sign form-control-feedback padding-ico"></span>
        </div>
    </div>

    <div id="pwd2-reg-div" class="form-group has-feedback">
        <label for="password-reg2" class="col-sm-4 control-label">Repeat password:</label>
        <div class="col-sm-8 padding-reg">
            <input type="password" class="form-control" id="password-reg2" name="repassword" th:placeholder="repassword" required>
            <span id="pwd2-true" class="glyphicon glyphicon-ok form-control-feedback padding-ico"></span>
            <span id="pwd2-false" class="glyphicon glyphicon-remove form-control-feedback padding-ico"></span>
            <span id="pwd2-empty" class="glyphicon glyphicon-warning-sign form-control-feedback padding-ico"></span>
        </div>
    </div>
</div>


<h3 data-toggle="tooltip" data-placement="bottom" title="OPTIONAL" style="color: #f0ad4e;">Account Information</h3>

<div id="info-table" class="bs-callout bs-callout-warning">
    <div class="form-group">
        <label for="firstName" class="col-sm-4 control-label">First name:</label>
        <div class="col-sm-8 padding-reg">
            <input type="text" class="form-control" name="firstName" id="firstName" th:field="*{firstName}" th:placeholder="FirstName" autocomplete="off">
        </div>
    </div>

    <div class="form-group">
        <label for="lastName" class="col-sm-4 control-label">Last Name:</label>
        <div class="col-sm-8 padding-reg">
            <input type="text" class="form-control" name="lastName" id="lastName" th:field="*{lastName}" th:placeholder="LastName" autocomplete="off">
        </div>
    </div>

    <div class="form-group">
        <label for="email" class="col-sm-4 control-label">Email:</label>
        <div class="col-sm-8 padding-reg">
            <input type="email" class="form-control" name="email" id="email" th:field="*{email}" th:placeholder="Email" autocomplete="off">
        </div>
    </div>

    <div class="form-group">
        <label for="phone" class="col-sm-4 control-label">Phone:</label>
        <div class="col-sm-8 padding-reg">
            <input type="text" class="form-control" name="phone" id="phone" th:field="*{phone}" th:placeholder="Phone" autocomplete="off">
        </div>
    </div>

    <div class="form-group">
        <label for="address1" class="col-sm-4 control-label">Address1:</label>
        <div class="col-sm-8 padding-reg">
            <input type="text" class="form-control" name="address1" id="address1" th:field="*{address1}" th:placeholder="Address1" autocomplete="off">
        </div>
    </div>

    <div class="form-group">
        <label for="address2" class="col-sm-4 control-label">Address2:</label>
        <div class="col-sm-8 padding-reg">
            <input type="text" class="form-control" name="address2" id="address2" th:field="*{address2}" th:placeholder="Address2" autocomplete="off">
        </div>
    </div>

    <div class="form-group">
        <label for="city" class="col-sm-4 control-label">City:</label>
        <div class="col-sm-8 padding-reg">
            <input type="text" class="form-control" name="city" id="city" th:field="*{city}" th:placeholder="City" autocomplete="off">
        </div>
    </div>
    
    <div class="form-group">
        <label for="state" class="col-sm-4 control-label">State:</label>
        <div class="col-sm-8 padding-reg">
            <input type="text" class="form-control" name="state" id="state" th:field="*{state}" th:placeholder="State" autocomplete="off">
        </div>
    </div>

    <div class="form-group">
        <label for="zip" class="col-sm-4 control-label">Zip:</label>
        <div class="col-sm-8 padding-reg">
            <input type="text" class="form-control" name="zip" id="zip" th:field="*{zip}" th:placeholder="Zip" autocomplete="off">
        </div>
    </div>

    <div class="form-group">
        <label for="country" class="col-sm-4 control-label">Country:</label>
        <div class="col-sm-8 padding-reg">
            <input type="text" class="form-control" name="country" id="country" th:field="*{country}" th:placeholder="Country" autocomplete="off">
        </div>
    </div>
</div>


<h3 data-toggle="tooltip" data-placement="bottom" title="OPTIONAL" style="color: #5bc0de;">Profile Information</h3>

<div id="profile-table" class="bs-callout bs-callout-info">
    <div class="form-group">
        <label for="languages" class="col-sm-4 control-label">Language Preference:</label>
        <div class="col-sm-8 padding-reg">
            <select name="languages" id="languages"  th:field="*{languagePreference}" class="form-control">
                <option value="Chinese">Chinese</option>
                <option value="English">English</option>
            </select>
        </div>
    </div>

    <div class="form-group">
        <label for="categories" class="col-sm-4 control-label">Favourite Category:</label>
        <div class="col-sm-8 padding-reg">
            <select name="categories" id="categories" th:field="*{favouriteCategoryId}" class="form-control">
                <option value="BIRDS">BIRDS</option>
                <option value="CATS">CATS</option>
                <option value="DOGS">DOGS</option>
                <option value="FISH">FISH</option>
                <option value="REPTILES">REPTILES</option>
            </select>
        </div>
    </div>

    <div class="form-group">
        <label for="isMyListEnabled" class="col-sm-4 control-label">Enable MyList</label>
        <div class="col-sm-8 padding-reg">
            <div class="checkbox">
                <label>
                    <input type="checkbox" id="isMyListEnabled" checked>
                </label>
            </div>
        </div>
    </div>

    <div class="form-group">
        <label for="isMyBannerEnabled" class="col-sm-4 control-label">Enable MyBanner</label>
        <div class="col-sm-8 padding-reg">
            <div class="checkbox">
                <label>
                    <input type="checkbox" id="isMyBannerEnabled" checked>
                </label>
            </div>
        </div>
    </div>
</div>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal" id="register-close">Close</button>
                    <button type="button" class="btn btn-warning" onclick="checkRegisterForm()" id="register-submit">Sign Up</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Verify Modal -->
<div class="modal fade" id="myVerificationModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div id="verify-content" class="modal-content center-block">

            
            <div id="slideBar" class="verify-body"></div>

            <div class="verify-footer">
                <a id="close-verify-btn" data-dismiss="modal"><span class="glyphicon glyphicon-remove-circle" style="font-size: 21px;padding-right: 5px;"></span></a>
                <a id="refresh-verify-btn"><span class="glyphicon glyphicon-repeat" style="font-size: 19px;"></span></a>
            </div>

        </div>
    </div>
</div>


<script type="text/javascript" th:src="@{../static/js/login.js}"></script>
<script type="text/javascript" th:src="@{../static/js/verification.js}"></script>

</body>

</html>

